<template>
	<div :style="!$route.meta.pageHeader ? 'margin: -10px -24px 0;' : null">
		<!-- pageHeader , route meta hideHeader:true on hide -->
		<page-header v-if="!$route.meta.pageHeader" :title="title" :logo="logo" :avatar="avatar">
			<slot slot="action" name="action"></slot>
			<slot slot="content" name="headerContent"></slot>
			<div slot="content" v-if="!this.$slots.headerContent && desc">
				<p style="font-size: 14px; color: rgba(0, 0, 0, 0.65)">{{ desc }}</p>
				<div class="link">
					<template v-for="(link, index) in linkList" >
						<a :key="index" :href="link.href">
							<a-icon :type="link.icon" />
							<span>{{ link.title }}</span>
						</a>
					</template>
				</div>
			</div>
			<slot slot="extra" name="extra"></slot>
			<div slot="pageMenu">
				<div class="page-menu-search" v-if="search">
					<a-input-search style="width: 80%; max-width: 522px" placeholder="请输入..." size="large" enterButton="搜索" />
				</div>
				<div class="page-menu-tabs" v-if="tabs && tabs.items">
					<!-- @change="callback" :activeKey="activeKey" -->
					<a-tabs :tabBarStyle="{ margin: 0 }" @change="tabs.callback" :activeKey="tabs.active()">
						<a-tab-pane v-for="item in tabs.items" :tab="item.title" :key="item.key"></a-tab-pane>
					</a-tabs>
				</div>
			</div>
		</page-header>
		<div class="content">
			<div :class="['page-header-index-wide']">
				<slot></slot>
			</div>
		</div>
	</div>
</template>

<script>
import PageHeader from "./PageHeader";

export default {
	name: "LayoutContent",
	components: {
		PageHeader,
	},
	// ['desc', 'logo', 'title', 'avatar', 'linkList', 'extraImage']
	props: {
		desc: {
			type: String,
			default: null,
		},
		logo: {
			type: String,
			default: null,
		},
		title: {
			type: String,
			default: null,
		},
		avatar: {
			type: String,
			default: null,
		},
		linkList: {
			type: Array,
			default: null,
		},
		extraImage: {
			type: String,
			default: null,
		},
		search: {
			type: Boolean,
			default: false,
		},
		tabs: {
			type: Object,
			default: () => {},
		},
	},
	methods: {},
};
</script>

<style lang="less" scoped>
.content {
	margin: 24px 24px 0;

	.link {
		margin-top: 16px;

		&:not(:empty) {
			margin-bottom: 16px;
		}
		a {
			margin-right: 32px;
			height: 24px;
			line-height: 24px;
			display: inline-block;

			i {
				font-size: 24px;
				margin-right: 8px;
				vertical-align: middle;
			}
			span {
				height: 24px;
				line-height: 24px;
				display: inline-block;
				vertical-align: middle;
			}
		}
	}
}
.page-menu-search {
	text-align: center;
	margin-bottom: 16px;
}
.page-menu-tabs {
	margin-top: 48px;
}
.page-header[data-v-6740ec88] {
	margin: 0px 24px 0;
}
</style>
